import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import {
    DeatilAllWrapper,
    DetailWrapper,
    Header,
    Content,
    DetailLeft,
    DettailTime,
    GiveLike,
    GiveReward,
    GiveLikeIcon,
    GiveRewardIcon,
    DetailMiddle,
    DetailRight,
    Attention,
    CharactersIntro,
    AttentionIcon,
    ReadTitle,
    Splendidness
} from './style'

import imageOne from '../../statics/15776993-8cb7037924fbe0d5.webp'
import imageTwo from '../../statics/15776993-efbbc0b16f50f379.webp'
 
class Detail extends Component{
    
    componentWillMount() {
        console.log(this.props.match.params)
    }

    render() {
        return (
            <DeatilAllWrapper>
                <DetailMiddle>
                    <DetailLeft>
                        <GiveLike>
                            <GiveLikeIcon><i className="iconfont">&#xe60c;</i></GiveLikeIcon> 
                            <p className="textCenter">43赞</p>
                        </GiveLike>
                        <GiveReward>
                            <GiveRewardIcon><i className="iconfont rewardIcon">&#xe610;</i></GiveRewardIcon>
                            <p className="textCenter">赞赏</p>
                        </GiveReward>
                    </DetailLeft>
                    <DetailWrapper>
                        <Header>程序员曝光心酸一幕：同事被裁，看着桌子上的行李，为他感到惋惜</Header>
                        <DettailTime>2019.03.12 20:40:31 字数 796 阅读 10166</DettailTime>
                        <Content>
                            <p>互联网的冬天越来越冷了，每天都有公司传出裁员的消息，一名程序员就吐槽了这样的心酸一幕：同事被裁员，看着大箱小箱的，还有桌子椅子，为他感到惋惜。</p>
                            <img alt="" src={imageOne} />
                            <p>如下就是这名程序员曝光的照片，桌子上堆满了大箱小箱，行李已经打包好，就等着离开公司了，看到这样的心酸一幕，周围的同事都为之惋惜，毕竟被裁员是一件残酷的事，意味着在短时间内丢了工作，只能另寻出路。</p>
                            <img alt="" src={imageTwo} />
                            <p>看到这样的一幕，不少围观的网友都表示心酸，互联网的裁员如此残酷和迅速，令人始料不及，似乎昨天还是资本追逐的香饽饽，一夜之间就被泼了不少冷水。有网友如此评论：这是把公司当成家了，个人物品这么多，被裁了一定很心酸吧；生活真艰难，普通人想安稳过一生真是难；一看就是老员工；无所谓裁不裁员，路还很多，人健康东山在，不过楼主这么一拍照，确实显得凄凉了；都是打工的，看到这样一幕还是禁不住打了个寒颤。</p>
                        </Content>
                    </DetailWrapper>
                    <DetailRight>
                      <img alt="" className="advertising" src="https://oimageb8.ydstatic.com/image?id=6255209988177333893&product=adpublish&w=520&h=347" />
                      <Attention>
                         <CharactersIntro>
                           <img src="//upload.jianshu.io/users/upload_avatars/7705786/a90dc05d-63f6-4690-8c1a-dcf7ff4422df.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" />
                           <AttentionIcon>
                               关注
                           </AttentionIcon>
                           <p className="charactersTitle">大山里的前端工程师</p>
                           <p className="grade">拥有0钻</p>
                         </CharactersIntro>
                         <ReadTitle>
                            程序员四年间拿到三家公司裁员补偿，网友：真是行走的裁员滚滚
                            <p className="readQuantity">阅读 2204</p>
                         </ReadTitle>
                         <ReadTitle>
                            程序员因写太多BUG，遭公司颁奖羞辱，一个比一个绝
                            <p className="readQuantity">阅读 2204</p>
                         </ReadTitle>
                      </Attention>
                      <Attention>
                          <Splendidness>
                              精彩继续
                          </Splendidness>
                          <ReadTitle>
                            花了10亿买房子，1年才住10天，这群人都在过什么生活？
                            <p className="readQuantity">阅读 2204</p>
                         </ReadTitle>
                      </Attention>
                      <img alt="" className="advertising" src="https://oimageb8.ydstatic.com/image?id=6255209988177333893&product=adpublish&w=520&h=347" />
                    </DetailRight>
                </DetailMiddle>
            </DeatilAllWrapper>
            
        )
    }
}

export default withRouter(Detail)